<template>
	<view>
		<uni-list class="animated swing">
			<uni-list-item title="标题文字" show-arrow="false"></uni-list-item>
			<uni-list-item title="标题文字"></uni-list-item>
			<uni-list-item title="标题文字" show-badge="true" badge-text="12"></uni-list-item>
			<uni-list-item title="禁用状态" disabled="true" show-badge="true" badge-text="12"></uni-list-item>
			<view class="container">
				<view class="content" v-show="isShow">
				</view>
				<button type="primary" class="btn" @click="changeIsShow">是否显示</button>
			</view>
			<view class="info_text">
				{{ ZHweight }}
			</view>
		</uni-list>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		data() {
			return {
				isShow: true,
				weight: 500
			}
		},
		onLoad() {

		},
		methods: {
			changeIsShow () {
				 this.isShow === true ? this.isShow = false : this.isShow = true
			}

		},
		components: {
			uniList,
			uniListItem
		},
		computed: { 
			ZHweight:function() {
				return this.weight ? `${this.weight/1000} kg` : `${this.weight} g`
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 200px;
	.content{
		width: 200rpx;
		height: 200rpx;
		background-color: $uni-bg-color-grey;
	}
	.btn{
		width: 200rpx;
		height: 70rpx;
		line-height: 70rpx;
	}
}
uni-button{
	padding: 0;
}
</style>
